import { StarFilled } from '@ant-design/icons'

import './index.less'

// 星星评价子类
function CheckedStar({ number, highColor, defaultColor }) {
  return (
    <div className='color-star'>
      <div className='first-star'>
        <StarFilled theme='filled' style={{ color: defaultColor, fontSize: 20 }} />
      </div>
      <div className='second-star' style={{ width: `${number}%` }}>
        <StarFilled type='star' theme='filled' style={{ color: highColor, fontSize: 20 }} />
      </div>
    </div>
  )
}

/**
 * @typedef {Object} StarRateProps
 * @property {number} [value] 评分值
 * @property {number} [size] 星星的个数，默认5个
 * @property {string} [highColor] 高亮星星的样式，默认#fadb14
 * @property {string} [defaultColor] 灰色星星的样式，默认#e9e9e9
 */

/**
 * 星星评价,只做展示
 * @param {StarRateProps} param0
 * @returns
 */
function StarRate({ value = 0, size = 5, highColor = '#fadb14', defaultColor = '#e9e9e9' }) {
  const starColorParams = { highColor, defaultColor } // 传递给子类的参数
  const decimalNum = (value % Math.floor(value)) * 100 // 获取小数部分
  return (
    <div className='star-rate-box'>
      {Array.from({ length: Math.floor(value) }).map((one, index) => (
        <CheckedStar key={index} number={100} {...starColorParams} />
      ))}
      {decimalNum ? <CheckedStar number={decimalNum} {...starColorParams} /> : null}
      {Array.from({ length: Math.floor(size - value) }).map((one, index) => (
        <CheckedStar key={index + 10} {...starColorParams} />
      ))}
      {/* <span style={{ paddingLeft: 8, color: highColor, fontSize: 14 }}>{value}</span> */}
    </div>
  )
}

export default StarRate
